<template>
	<view class="content">
		<BaseNavBar title="个人信息" :isnormal="false" />
		<view class="body" style="background-color: #EFF1F2;flex: 1;padding: 0;">
			<!-- cell avatar -->
			<view style="background-color: white;padding: 0 15px;">
				<view style="display: flex;align-items: center;justify-content: space-between;padding: 12px 0;">
					<!-- left -->
					<view style="display: flex;align-items: center;">
						<text style="font-size: 16px;">头像</text>
					</view>
					<!-- right -->
					<view style="display: flex;align-items: center;" @click="onChooseAvatar">
						<view v-if="info.avatar"
							style="width: 60px;height: 60px;border-radius: 30px;overflow: hidden;display: flex;justify-content: center;align-items: center;border: 1px solid #2456E0;">
							<image :src="info.avatar" style="width: 100%;height: 100%;" mode="aspectFit">
							</image>
						</view>
						<view v-else
							style="display: flex;align-items: center;justify-content: center;border:1px solid #666666; width: 60px;height: 60px;padding: 10px;border-radius: 50%;overflow: hidden;">
							<image src="/static/icon-add-img.png" style="width: 48px;height: 40px;" mode="aspectFill">
							</image>
						</view>

						<!-- icon -->
						<!-- <image src="/static/icon-add-img.png" style="width: 15px;height: 15px;margin-left: 5px;"
							mode="aspectFit">
						</image> -->
					</view>
				</view>
				<view style="height: 1px;background-color: #ebebeb;"></view>
			</view>

			<!-- 实名 -->
			<view style="background-color: white;padding: 0 15px;">
				<view style="display: flex;align-items: center;justify-content: space-between;padding: 12px 0;">
					<!-- left -->
					<view style="display: flex;align-items: center;">
						<text style="font-size: 16px;">实名</text>
					</view>
					<!-- right -->
					<view style="display: flex;align-items: center;text-align: right;font-size: 14px;">
						<input type="text" placeholder="请输入姓名" v-model="info.name">
						<image src="/static//arrow-mid-right.png" style="width: 15px;height: 15px;margin-left: 5px;"
							mode="aspectFit">
						</image>
					</view>
				</view>
				<view style="height: 1px;background-color: #ebebeb;"></view>
			</view>

			<!-- 手机号 -->
			<view style="background-color: white;padding: 0 15px;display: none;">
				<view style="display: flex;align-items: center;justify-content: space-between;padding: 12px 0;">
					<!-- left -->
					<view style="display: flex;align-items: center;">
						<text style="font-size: 16px;">手机号</text>
					</view>
					<!-- right -->
					<view style="display: flex;align-items: center;">
						<text style="font-size: 16px;color: #666666;">{{info.phone}}</text>
						<image src="/static//arrow-mid-right.png" style="width: 15px;height: 15px;margin-left: 5px;"
							mode="aspectFit">
						</image>
					</view>
				</view>
				<view style="height: 1px;background-color: #ebebeb;"></view>
			</view>

			<!-- 性别 -->
			<view style="background-color: white;padding: 0 15px;">
				<view style="display: flex;align-items: center;justify-content: space-between;padding: 12px 0;">
					<!-- left -->
					<view style="display: flex;align-items: center;">
						<text style="font-size: 16px;">性别</text>
					</view>
					<!-- right -->
					<view style="display: flex;align-items: center;">
						<picker @change="bindPickerSex" :value="sexIndex" :range="sexArray">
							<view style="padding: 20rpx;font-size: 16px;">{{ sexArray[sexIndex]}}</view>
						</picker>
						<!-- <text style="font-size: 16px;color: #666666;">{{info["sex"] == 1?'男':'女'}}</text> -->
						<image src="/static//arrow-mid-right.png" style="width: 15px;height: 15px;margin-left: 5px;"
							mode="aspectFit">
						</image>
					</view>
				</view>
				<view style="height: 1px;background-color: #ebebeb;"></view>
			</view>

			<!-- 年龄 -->
			<view style="background-color: white;padding: 0 15px;">
				<view style="display: flex;align-items: center;justify-content: space-between;padding: 12px 0;">
					<!-- left -->
					<view style="display: flex;align-items: center;">
						<text style="font-size: 16px;">年龄</text>
					</view>
					<!-- right -->
					<view style="display: flex;align-items: center;">
						<input type="number" class="age-input" @input="onKeyInput" v-model="info.age"
							placeholder="请输入年龄" />
						<!-- <input type="text" :value="info["age"]"></input> -->
						<!-- <text style="font-size: 16px;color: #666666;">{{info["age"]}}</text> -->
						<image src="/static//arrow-mid-right.png" style="width: 15px;height: 15px;margin-left: 5px;"
							mode="aspectFit">
						</image>
					</view>
				</view>
				<view style="height: 1px;background-color: #ebebeb;"></view>
			</view>

			<!-- 身份类型 -->
			<view style="background-color: white;padding: 0 15px;">
				<view style="display: flex;align-items: center;justify-content: space-between;padding: 12px 0;">
					<!-- left -->
					<view style="display: flex;align-items: center;">
						<text style="font-size: 16px;">身份类型</text>
						<text style="font-size: 10px;color: #999999;">（更改需审核）</text>
					</view>
					<!-- right -->
					<view style="display: flex;align-items: center;">
						<picker @change="bindPickerChange" :value="index" :range="roleArray" range-key="name">
							<view style="padding: 20rpx;font-size: 16px;">{{ roleArray[index].name }}</view>
						</picker>
						<!-- <text style="font-size: 16px;color: #666666;">{{info["idtype"]}}</text> -->
						<image src="/static//arrow-mid-right.png" style="width: 15px;height: 15px;margin-left: 5px;"
							mode="aspectFit">
						</image>
					</view>
				</view>
				<view style="height: 1px;background-color: #ebebeb;"></view>
			</view>

			<!-- 企业二维码 -->
			<view style="background-color: white;padding: 0 15px;">
				<view style="display: flex;align-items: center;justify-content: space-between;padding: 12px 0;">
					<!-- left -->
					<view style="display: flex;align-items: center;">
						<text style="font-size: 16px;">企业二维码</text>
						<text style="font-size: 10px;color: #999999;">（更改需审核）</text>
					</view>
					<!-- right -->
					<view style="display: flex;align-items: center;" @click="onChooseCode">
						<view v-if="info.qrcode"
							style="width: 30px;height: 30px;border-radius: 5px;overflow: hidden;display: flex;justify-content: center;align-items: center;border: 1px solid #2456E0;">
							<image :src="info.qrcode" style="width: 100%;height: 100%;" mode="aspectFit">
							</image>
						</view>
						<view v-else
							style="display: flex;align-items: center;justify-content: center;overflow: hidden;">
							<!-- <image src="/static/icon-add-img.png" style="width: 100%;height: 100%;" mode="aspectFill">
							</image> -->
							请上传二维码图片
						</view>
						<image src="/static/arrow-mid-right.png" style="width: 15px;height: 15px;margin-left: 5px;"
							mode="aspectFit">
						</image>
					</view>
				</view>
				<view style="height: 1px;background-color: #ebebeb;"></view>
			</view>

			<!-- 我的地址 -->
			<view style="background-color: white;padding: 0 15px;display: none;">
				<view style="display: flex;align-items: center;justify-content: space-between;padding: 12px 0;">
					<!-- left -->
					<view style="display: flex;align-items: center;">
						<text style="font-size: 16px;">我的地址</text>
						<text style="font-size: 10px;color: #999999;">（更改需审核）</text>
					</view>
					<!-- right -->
					<view style="display: flex;align-items: center;">
						<text style="font-size: 16px;color: #666666;">{{info["address"]}}</text>
						<image src="/static//arrow-mid-right.png" style="width: 15px;height: 15px;margin-left: 5px;"
							mode="aspectFit">
						</image>
					</view>
				</view>
				<view style="height: 1px;background-color: #ebebeb;"></view>
			</view>
		</view>
		<view class="page-btn" @click="submit()">保存</view>
	</view>
</template>

<script>
	import {
		skillOption,
		updateUserInfor,
		uploadFile
	} from '../../api'
	import {
		pressHeadImg,
		nickNameCharacterCount
	} from '../../utils/dealAvatarNickname.js'
	export default {
		data() {
			return {
				roleArray: [],
				sexArray: ['男', '女'],
				index: 0,
				sexIndex: 0,
				info: {
					avatar: '',
					phone: "",
					idtype: "",
					qrcode: '',
					address: '',
				},
			}
		},
		mounted() {
			console.log('1111')
			let storageUserInfo = uni.getStorageSync("userInfo")
			console.log('storageUserInfo--', storageUserInfo.avatar, storageUserInfo.userName)
			let {
				username,
				avatar,
				age,
				bizQrcode,
				roleType,
				mobile,
			} = storageUserInfo
			this.sexArray.forEach((item, index) => {
				if (item == storageUserInfo.sex) {
					console.log(index, 'index')
					this.sexIndex = index
				}
			});
			this.info = {
				avatar: avatar,
				phone: mobile,
				age: age,
				name: username,
				idtype: "",
				qrcode: bizQrcode,
				address: ''
			}

			this.getSkillOption(roleType)
		},
		methods: {
			async onChooseAvatar(e) {
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择或者打开相机
					success: function(res) {
						if (res.tempFiles[0].size > 2 * 1024 * 1024) {
							_this.$refs.uToast.show({
								type: "error",
								message: "图片大小不得超过2MB"
							});
						} else {
							uni.uploadFile({
								url: "http://admin.api.moyangjia.top/api/File/upload",
								filePath: res.tempFilePaths[0],
								name: "file",
								success: uploadFileRes => {
									// console.log(JSON.parse(JSON.stringify(uploadFileRes.data)))
									let res = JSON.parse(uploadFileRes.data)
									_this.info.avatar = res.data.fileUrl
									// 根据返回的uploadFileRes.data做操作，往下逻辑要怎么写关键还是要看后端如何处理。就当前逻辑该上传接口返回的是图片需要的一个ID，
									// 该方法是通过将uploadFileRes.data中的某个值传参给后端，后端返回ArrayBuffer对象，最后在专程Base64字符串
									// _this.showPhoto(uploadFileRes.data)
								}
							});
						}
					}
				});
			},
			async onChooseCode(e) {
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择或者打开相机
					success: function(res) {
						if (res.tempFiles[0].size > 2 * 1024 * 1024) {
							_this.$refs.uToast.show({
								type: "error",
								message: "图片大小不得超过2MB"
							});
						} else {
							uni.uploadFile({
								url: "http://admin.api.moyangjia.top/api/File/upload",
								filePath: res.tempFilePaths[0],
								name: "file",
								success: uploadFileRes => {
									// console.log(JSON.parse(JSON.stringify(uploadFileRes.data)))
									let res = JSON.parse(uploadFileRes.data)
									_this.info.qrcode = res.data.fileUrl
									// 根据返回的uploadFileRes.data做操作，往下逻辑要怎么写关键还是要看后端如何处理。就当前逻辑该上传接口返回的是图片需要的一个ID，
									// 该方法是通过将uploadFileRes.data中的某个值传参给后端，后端返回ArrayBuffer对象，最后在专程Base64字符串
									// _this.showPhoto(uploadFileRes.data)
								}
							});
						}
					}
				});
			},
			bindPickerSex: function(e) {
				console.log('sex')
				this.sexIndex = e.detail.value;
			},
			bindPickerChange: function(e) {
				console.log('dddd')
				this.index = e.detail.value;
			},
			onKeyInput: function(e) {
				this.info.age = e.detail.value
			},
			getSkillOption(roleType) {
				skillOption().then(res => {
					console.log('页===', res)
					if (res.status == 200) {
						this.roleArray = res.data.roleTypes
						this.roleArray.forEach((item, index) => {
							if (item.name == roleType) {
								this.index = index
							}
						})
					}
				})
			},
			submit() {
				if (!this.info.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none',
					})
					return
				} else if (!this.info.age) {
					uni.showToast({
						title: '请输入年龄',
						icon: 'none',
					})
					return
				}
				let userInfo = uni.getStorageSync('userInfo')
				let data = {
					id: userInfo.id,
					username: this.info.name,
					avatar: this.info.avatar,
					sex: this.sexArray[this.sexIndex],
					age: this.info.age,
					roleType: this.roleArray[this.index].name,
					bizQrcode: this.info.qrcode
				}
				updateUserInfor(data).then(res => {
					console.log('个人信息页===', res)
					if (res.status == 200) {
						uni.showToast({
							title: '修改成功',
						})
            let storageUserInfo = uni.getStorageSync("userInfo")
            storageUserInfo.username = data.username
            storageUserInfo.avatar = data.avatar
            storageUserInfo.sex = data.sex
            storageUserInfo.age = data.age
            storageUserInfo.roleType = data.roleType
            storageUserInfo.bizQrcode = data.bizQrcode
            uni.setStorageSync('userInfo', storageUserInfo)
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}
				})
			}
		},
		onLoad() {


		}
	}
</script>

<style>
	.age-input {
		text-align: right;
		font-size: 16px;
	}
</style>